<template>
  <div class="form-group">
    <label :for="inputId">{{ label }}</label>
    <div class="upload-container">
      <div class="preview" v-if="previewUrl">
        <img :src="previewUrl" :alt="label">
      </div>
      <input 
        type="file" 
        :id="inputId" 
        accept="image/*"
        @change="handleFileChange"
        style="display: none;"
      >
      <label :for="inputId" class="upload-btn">
        <i class="fa fa-upload"></i> {{ previewUrl ? '更换图片' : '选择图片' }}
      </label>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FileUpload',
  props: {
    label: {
      type: String,
      default: '上传文件'
    },
    inputId: {
      type: String,
      required: true
    },
    value: {
      type: File,
      default: null
    },
    previewUrl: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleFileChange(event) {
      const file = event.target.files[0]
      if (file) {
        this.$emit('input', file)
        this.$emit('change', file)
      }
    }
  }
}
</script>

<style scoped>
@import '../assets/css/common.css';
</style>


